<template>
  <div>
    <el-form ref="form" :model="FormData" :rules="rules" label-width="140px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="sku:" label-width="60px">
            <span>{{ FormData.skuNo }}</span>
            <i style="margin: 0 5px" class="el-icon-document-copy" @click="useCopy(FormData.skuNo)"></i>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('库位号') + ':'" label-width="94px">
            <span>{{ FormData.stockPositionNo }}</span>
            <i style="margin: 0 5px" class="el-icon-document-copy" @click="useCopy(FormData.stockPositionNo)"></i>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('额外sku') + ':'">
            <span>{{ FormData.skuExtra }}</span>
            <i style="margin: 0 5px" class="el-icon-document-copy" @click="useCopy(FormData.skuExtra)"></i>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item :label="$t('长度') + ':'" label-width="40px">
            <el-input
              oninput="value=value.replace(/[^\d.]/g, '')"
              v-model="FormData.skuAttrLength"
              style="width: 120px; margin-right: 4px"
            ></el-input
            >cm
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-form-item :label="$t('宽度') + ':'" label-width="40px">
            <el-input
              oninput="value=value.replace(/[^\d.]/g, '')"
              v-model="FormData.skuAttrWidth"
              style="width: 120px; margin-right: 4px"
            ></el-input
            >cm
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-form-item :label="$t('高度') + ':'" label-width="40px">
            <el-input
              oninput="value=value.replace(/[^\d.]/g, '')"
              v-model="FormData.skuAttrHeight"
              style="width: 120px; margin-right: 4px"
            ></el-input
            >cm
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-form-item :label="$t('重量') + ':'" label-width="60px">
            <el-input
              oninput="value=value.replace(/[^\d.]/g, '')"
              v-model="FormData.skuAttrWeight"
              style="width: 120px; margin-right: 4px"
            ></el-input
            >g
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item :label="$t('日本发货方式-普发') + ':'" label-width="140px">
            <div class="size">{{ FormData.deliverWayJpNormal }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('发货单价-普发') + ':'" label-width="140px">
            <div class="size">{{ (+FormData.deliverUnitPriceNormal).toFixed(0) }}JPY</div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('发货时效-普发') + ':'" label-width="140px">
            <div class="size">{{ FormData.deliverAgeingNormal }} 天</div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('发货仓库-普发') + ':'">
            <el-input v-model="FormData.deliverPositionNormal"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item :label="$t('日本发货方式-快速') + ':'" label-width="140px">
            <div class="size">{{ FormData.deliverWayJpFast }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('发货单价-快速') + ':'" label-width="140px">
            <div class="size">{{ (+FormData.deliverUnitPriceFast).toFixed(0) }}JPY</div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('发货时效-快速') + ':'" label-width="140px">
            <div class="size">
              {{ FormData.deliverAgeingFast }}
              {{ $t('天') }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('发货仓库-快速') + ':'">
            <el-input v-model="FormData.deliverPositionFast"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('日本发货备注') + ':'" prop="jpDeliverRemark">
            <el-input v-model="FormData.jpDeliverRemark"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item :label="$t('自社发货时效') + ':'" prop="deliverAging">
            <el-input v-model="FormData.deliverAging"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('云价格') + ':'" prop="cloudPrice">
            <div>{{ FormData.cloudPrice }}</div>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="国内发货方式:" prop="deliverWayCn">
            <el-select @change="setRate" v-model="FormData.deliverWayCn">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in deliver_goods_cn_list"
                :key="index" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="国内发货倍率:" prop="skuNameCn">
            <div>{{ FormData.deliverRate }}</div>
          </el-form-item>
        </el-col> -->
      </el-row>
      <!-- <el-row>
        <el-col :span="5">
          <el-form-item label="普通发货成本:" prop="skuNameCn">
            <div>{{ FormData.deliverRate }}1508JPY</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="快递发货成本:" prop="skuNameCn">
            <div>{{ FormData.deliverRate }}1508JPY</div>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <div class="footer">
      <el-button
        type="primary"
        @click="submitForm"
        v-hasPermi="['distribution:skuDistributor:updateSkuDistributorDeliverDetails']"
      >
        {{ $t('保存修改') }}
      </el-button>
      <el-button @click="close">{{ $t('关闭') }}</el-button>
    </div>
  </div>
</template>

<script>
import { useDict } from '@/utils/useDict'

import {
  getSkuDistributorDeliverInfo,
  updateSkuDistributorDeliverDetails,
} from '@/api/distribution/sku/expressageInformation'
export default {
  name: 'ErpDistributionSystemPlusBasicInformation',

  data() {
    return {
      /**国内发货方式 */
      deliver_goods_cn_list: [],
      FormData: {},
      backFormDate: {},
      rules: {
        sku: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuNameCn: [{ required: true, message: '请输入', trigger: 'blur' }],
        jpDeliverRemark: [{ validator: this.validLength, required: false, trigger: 'change' }],
      },
    }
  },

  props: {
    skuId: {
      type: String,
      default: '',
    },
  },
  mounted() {
    this.FormData = {}
    this.SkuDistributorDeliverInfo()
    useDict('deliver_goods_cn').then(({ deliver_goods_cn }) => (this.deliver_goods_cn_list = deliver_goods_cn))
  },

  methods: {
    /**验证长度 */
    validLength(rule, value, callback) {
      const { field } = rule
      const strLength = value?.length || 0

      // name
      if (field == 'jpDeliverRemark') {
        //  长度最大为 255
        if (strLength > 255) {
          return callback(new Error(`文字超长 ${strLength} / 255`))
        }
      }

      return callback()
    },
    // 验证数据是否改变
    validFormData() {
      let FormDataChange = null
      if (JSON.stringify(this.backFormDate) == JSON.stringify(this.FormData)) {
        FormDataChange = false
      } else {
        FormDataChange = true
      }
      return FormDataChange
    },
    setRate(id) {
      const rate = this.deliver_goods_cn_list.filter((i) => i.value == id)
      if (rate && rate.length > 0) {
        this.FormData.deliverRate = rate[0].dictValueRef
      }
    },
    SkuDistributorDeliverInfo() {
      getSkuDistributorDeliverInfo({ skuId: this.skuId }).then((res) => {
        console.log(res)
        this.$parent.$parent.updateSkuImg(res.data.imgUrl)
        this.backFormDate = res.data
        this.FormData = JSON.parse(JSON.stringify(this.backFormDate))
      })
    },
    close() {
      this.$parent.$parent.cancel()
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          updateSkuDistributorDeliverDetails(this.FormData).then((res) => {
            this.$message({
              type: 'success',
              message: res.msg,
            })
            this.SkuDistributorDeliverInfo()
          })
        }
      })
    },
    cancel() {},
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 10px !important;
}

.size {
  width: 100%;
  text-align: center;
}

.card {
  border-radius: 2px;
  padding: 4px 6px;
  border: solid 1px rgba(0, 0, 0, 0.1);
}

.footer {
  margin-top: 10px;
  float: right;
}
</style>
